<template>
  <div class="main">
    <div class="title">
      <div class="titleBlock"></div>
      <div class="titleText">预约详情</div>
    </div>
    <div class="card1">
      <div class="card1Title">患者信息</div>
      <div class="card1Section">
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="患者姓名">
              <el-input v-model="form.pay_patient_name" disabled />
            </el-form-item>
            <el-form-item label="证件类型">
              <el-input v-model="form.id_type" disabled />
            </el-form-item>
            <el-form-item label="微信昵称">
              <el-input v-model="form.weixinname" disabled />
            </el-form-item>
            <el-form-item label="就诊人地址">
              <el-input v-model="form.Address_client" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="就诊卡号">
              <el-input v-model="form.card_numer" disabled />
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input v-model="form.patients_id_number" disabled />
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="form.patients_phone" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="患者头像">
              <el-image
                style="width: 150px; height: 120px"
                :src="form.url"
                :fit="fit"
              />
            </el-form-item>
            <el-form-item label="关系">
              <span v-if="form.patients_identity_information == 1">本人</span>
              <span v-if="form.patients_identity_information == 2">父母</span>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <div class="card1">
      <div class="card1Title">就诊信息</div>
      <div class="card1Section">
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="就诊医院">
              <el-input v-model="form.Clinic_hospital" disabled />
            </el-form-item>
            <el-form-item label="就诊医生">
              <el-input v-model="form.doctor" disabled />
            </el-form-item>
            <el-form-item label="费用类型">
              <el-input v-model="form.Cost_type" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="医院地址">
              <el-input v-model="form.Hospital_address" disabled />
            </el-form-item>
            <el-form-item label="医生职称">
              <el-input v-model="form.doctor_job" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="就诊科室">
              <el-input v-model="form.keshi" disabled />
            </el-form-item>
            <el-form-item label="业务类型">
              <el-input v-model="form.Business_types" disabled />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="tab">
        <el-table
          :data="tableData"
          stripe
          style="width: 50%"
          :header-cell-style="{ background: '#f2f2f2' }"
        >
          <el-table-column prop="from_id" label="序号" />
          <el-table-column prop="from_name" label="项目名称" />
          <el-table-column prop="from_unit_price" label="单价" />
          <el-table-column prop="from_number" label="数量" />
          <el-table-column prop="from_subtotal" label="小计（元）" />
        </el-table>
      </div>
    </div>

    <div class="card1">
      <div class="card1Title">订单信息</div>
      <div class="card1Section">
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="订单总额">
              <el-input v-model="form.total_order" disabled />
            </el-form-item>
            <el-form-item label="订单状态">
              <span v-if="form.Payment_status == 1" class="text"> 已支付</span>
              <span v-if="form.Payment_status == 2" class="text"> 待支付</span>
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="支付方式">
              <el-input v-model="form.Method_payment" disabled />
            </el-form-item>
            <el-form-item label="订单编号">
              <el-input v-model="form.order_no" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="卡内余额">
              <el-input v-model="form.balance" disabled />
            </el-form-item>
            <el-form-item label="取消时间">
              <el-input v-model="form.Cancel_time" disabled />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed, watch } from "vue";
import storege from "../../utils/storege";
export default {
  props: {},
  setup() {
    const data = reactive({
      form: {},
      tableData: [
        {
          from_id: "1",
          from_name: "普罗布考片",
          from_unit_price: "50.00",
          from_number: "2",
          from_subtotal: "100.00",
        },
        {
          from_id: "2",
          from_name: "阿司匹林肠溶片",
          from_unit_price: "40.00",
          from_number: "2",
          from_subtotal: "80.00",
        },
        {
          from_id: "3",
          from_name: "布洛芬缓释片",
          from_unit_price: "40.00",
          from_number: "2",
          from_subtotal: "80.00",
        },
        {
          from_id: "4",
          from_name: "羊角颗粒",
          from_unit_price: "15.00",
          from_number: "2",
          from_subtotal: "30.00",
        },
      ],
    });
    let aa = storege.getStorage("row");
    data.form = aa;
    // console.log(data.form);
    return { ...toRefs(data) };
  },
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0 30px;
  box-sizing: border-box;
  .titleBlock {
    width: 50px;
    height: 13px;
    background-color: #006eff;
    border-radius: 20px;
  }
  .titleText {
    font-size: 30px;
    margin-left: 20px;
  }
}
.card1 {
  box-shadow: 1px 1px 5px 1px rgba(194, 188, 188, 0.486);
  width: 100%;
  margin-bottom: 30px;
  .card1Title {
    padding: 20px;
    box-sizing: border-box;
    color: #006eff;
    background-color: #f2f2f2;
  }
  .card1Section {
    width: 100%;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-top: 40px;
    box-sizing: border-box;
    .form1 {
      width: 30%;
      // .el-input__wrapper {
      //   box-shadow: 0 0 0 0 gray;
      // }
      .btn {
        background-color: #006eff;
        color: white;
      }
    }
  }
  .anNiu {
    padding: 30px 80px 50px;
    box-sizing: border-box;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    .el-button {
      padding: 10px 15px;
      box-sizing: border-box;
      font-size: 20px;
    }
  }
}
.tab {
  width: 100%;
  background-color: white;
  position: relative;
  padding-left: 65px;
  padding-bottom: 40px;
  box-sizing: border-box;
}
.text {
  color: yellowgreen;
}
</style>